<template>
    <view>
        <view class="hot-comment">
            <view class="hot-comment-title">结果评价</view>
            <view class="null" v-if="commentList.length==0">
                暂无更多评价~
            </view>
            <view class="hot-comment-item" v-for="(item, index) in commentList" :key="index">
                <view class="hot-comment-head">
<!--                                        <img :src="File_Url+'system-icon.jpg'" />-->
                    <view class="img">
                        <img :src="item.photo_url"/>
                        <img class="icon" :src="File_Url+'vip-icon.png'" v-if="item.is_vip==1" />
                    </view>

                    <text>{{item.nickname}}</text>
<!--                    <img class="icon" :src="File_Url+'vip-icon.png'" v-if="item.is_vip==1" />-->
                    <view class="foot-right">
                        <view class="foot-right-item" @click.stop="commentLikeAction(item.id)">
                            <img :src="File_Url+'comment-support-active.png'" v-if="item.is_like == 1" />
                            <img :src="File_Url+'comment-support.png'" v-else />
                            <text>{{item.comment_like_num}}</text>
                        </view>
                        <view class="foot-right-item" @click.stop="commentReply(item.id,'')">
                            <img :src="File_Url+'comment-icon.png'" />
                        </view>
                    </view>
                </view>
                <view class="hot-comment-content" v-html="item.content"></view>
                <view class="comment-reply" v-if="item.reply_list.length>0">
                    <view class="comment-reply-item" v-for="(reply, int) in item.reply_list" :key="int" v-if="int<1?'true':replyMore[index]" >
                        <view class="reply-head">
                            <view class="img">
                                <img :src="reply.photo_url" />
                                <img class="icon" :src="File_Url+'vip-icon.png'" v-if="reply.is_vip==1" />
                            </view>
                            <view class="reply-right">
                                <view class="name">
                                    {{reply.nickname}}
<!--                                    <img class="icon" :src="File_Url+'vip-icon.png'" v-if="reply.is_vip==1" />-->
                                    <view class="title" v-if="reply.to_user_name!=''">
                                        {{reply.to_user_name!=''?'回复':''}}
                                    </view>
                                    {{reply.to_user_name!=''?reply.to_user_name:''}}
                                </view>
<!--                                <text class="time">{{reply.created_at.split(' ')[0]}}</text>-->
                            </view>
                            <view class="foot-right">
                                <view class="foot-right-item" @click.stop="commentLikeAction(reply.id)">
                                    <img :src="File_Url+'comment-support-active.png'" v-if="reply.is_like == 1" />
                                    <img :src="File_Url+'comment-support.png'" v-else />
                                    <text>{{reply.comment_like_num}}</text>
                                </view>
                                <view class="foot-right-item" @click.stop="commentReply(item.id,reply.user_id)">
                                    <img :src="File_Url+'comment-icon.png'" />
                                </view>
                            </view>
                        </view>
                        <view class="reply-content" v-html="reply.content" ></view>
                    </view>
                    <view class="more" v-if="item.reply_list.length>1&&!replyMore[index]" @click.stop="showMoreReply(index)">
                        显示更多<img :src="File_Url+'right-grey.png'" />
                    </view>
                    <view class="more" v-if="item.reply_list.length>1&&replyMore[index]" @click.stop="hideMoreReply()">
                        隐藏更多<img :src="File_Url+'right-grey.png'" />
                    </view>
                </view>
<!--                <view class="hot-comment-foot">-->
<!--                    <view class="foot-left">{{item.created_at.split(' ')[0]}}</view>-->
<!--                    <view class="foot-right">-->
<!--                        <view class="foot-right-item" @click="commentLikeAction(item.id)">-->
<!--                            <img :src="File_Url+'comment-support-active.png'" v-if="item.is_like == 1" />-->
<!--                            <img :src="File_Url+'comment-support.png'" v-else />-->
<!--                            <text>{{item.comment_like_num}}</text>-->
<!--                        </view>-->
<!--                    </view>-->
<!--                </view>-->
            </view>
            <view class="hot-comment-more" @click="addComment" v-if="commentList.length>0&&commentTotal!=commentList.length">
                查看更多
            </view>
        </view>
        <view class="input-model" @click="textareaBlur" v-if="show">
            <!-- 抽屉栏 -->
            <view class="emoji-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard" @click.stop>
                <!-- 表情 -->
                <swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
                    <swiper-item v-for="(page,pid) in emojiList" :key="pid">
                        <view v-for="(em,eid) in page" :key="eid" @click.stop="addEmoji(em)">
                            <image mode="widthFix" :src="File_Url+'emoji/'+em.url"></image>
                        </view>
                    </swiper-item>
                </swiper>
                <!-- 更多功能 相册-拍照-@用户 -->
            </view>
            <!-- 底部输入栏 -->
            <view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard" @click.stop>
                <!-- H5下不能录音，输入栏布局改动一下 -->
                <!-- #ifndef H5 -->
                <!--            <view class="voice">-->
                <!--                <view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>-->
                <!--                <view class="icon jianpan" ></view>-->
                <!--            </view>-->
                <!-- #endif -->
                <!-- #ifdef H5 -->
                <!--            <view class="more" @tap="showMore">-->
                <!--                <view class="icon add"></view>-->
                <!--            </view>-->
                <!-- #endif -->
                <view class="textbox">
                    <!--                <view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>-->
                    <!--                <view class="text-mode"  :class="isVoice?'hidden':''">-->
                    <view class="text-mode" >
                        <view class="box">
                            <textarea :show-confirm-bar="false" fixed auto-height="true" auto-focus="true" cursor-spacing="35rpx" v-model="textMsg" @focus="textareaFocus"/>
                            <!--                        <input @focus="textareaFocus" v-model="textMsg"/>-->
                        </view>
                        <view class="em">
                            <!--                        <view class="icon biaoqing" @click.stop="chooseEmoji"></view>-->
                        </view>
                    </view>
                </view>
                <!-- #ifndef H5 -->
                <!-- #endif -->
                <!--            <view class="send" :class="isVoice?'hidden':''" @tap="sendText">-->
                <view class="send" @click.stop="userComments" >
                    <view class="btn1">提交</view>
                </view>
                <!--            <view class="send" @click.stop="textareaBlur" v-if="textMsg == ''">-->
                <!--                <view class="btn2">取消</view>-->
                <!--            </view>-->
            </view>
        </view>
    </view>

</template>

<script>
    export default {
        name: "indexput",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                show : this.inputShow,
                commentList:[],
                commentPage: 1,
                commentTotal: 0,
                //@窗口显影
                AitShow: false,
                //搜索输入框显隐
                searchShow:true,
                // foucsType:false,
                //文字消息
                textMsg:'',
                // putInfo:this.IndexputInfo,
                //@用户列表
                AitUserList: [],
                // 抽屉参数
                popupLayerClass:'',
                // more参数
                hideMore:true,
                //表情定义
                hideEmoji:true,
                emojiList:[
                    [{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
                    [{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
                    [{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
                    [{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
                    [{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]
                ],
                reset:true,
                commentType: '',
                commentId : '',
                comment_userId: '',
                replyMore: []
            }
        },
		props:{
            Id:{
			    required: true
            },
            inputShow:{
                required: true,
                type:Boolean
            },
            type:{
                required: true
            },
		},
        mounted(){
            this.getComments();
            // this.foucsType = true;
        },
        methods:{
            //获取资讯评论
            async getComments(){
                let str = [];
                for (let i = 0 ; i< this.commentPage; i++){
                    let params = {
                        demand_id: this.Id,
                        news_id: this.Id,
                        user_token: uni.getStorageSync('userToken'),
                        page: i+1,
                        limit: 2,
                        type: this.type
                    }
                    const res = await this.$api.getNewsComment(params);
                    if (res.data.level == 'success'){
                        str = str.concat(res.data.data);
                        if (this.reset){
                            for (let i=0 ; i< str.length ; i++){
                                this.replyMore[i] = false;
                            }
                        }
                        this.commentTotal = res.data.page_info.total;
                    }
                }
                this.commentList = str;

            },
            //查看更多资讯评论
            addComment(){
                if (this.commentTotal > this.commentList.length){
                    this.commentPage++;
                    this.getComments();
                }
            },
            //查看更多回复
            showMoreReply(id){
                console.log(this.replyMore)
                let str = this.replyMore;
                for (let i = 0; i<str.length ; i++){
                    if (i == id){
                        str[i] = true
                    } else {
                        str[i] = false
                    }
                }
                this.replyMore = [];
                this.replyMore = str;

            },
            //查看更多回复
            hideMoreReply(){
                console.log(this.replyMore)
                let str = this.replyMore;
                for (let i = 0; i<str.length ; i++){
                    str[i] = false
                }
                this.replyMore = [];
                this.replyMore = str;

            },
            //评论或回复
            commentReply(commentId,userId){
                this.commentId = commentId;
                this.comment_userId = userId;
                this.commentType = 'reply';
                this.show = true
            },
            //官方点评点赞
            async commentLikeAction(id){
                let params = {
                    comment_id: id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.commentLikeAction(params);
                this.reset = false;
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon: 'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    let str = this.commentPage
                    for (let i = 0;i<str;i++){
                        this.commentPage = i+1;
                        this.getComments();
                    }
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message,
                        duration: 3000
                    })
                    let str = this.commentPage
                    for (let i = 0;i<str;i++){
                        this.commentPage = i+1;
                        this.getComments();
                    }
                }
            },
            userComments(){
              if (this.textMsg == ''){
                  uni.showToast({
                      icon:'none',
                      title:"评论不能为空~"
                  })
              } else {
                  this.userComment()
              }
            },
            //评论或回复
            async userComment(type){
                // this.content = this.textMsg.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{
                //     for(let i=0;i<this.emojiList.length;i++){
                //         let row = this.emojiList[i];
                //         for(let j=0;j<row.length;j++){
                //             let EM = row[j];
                //             if(EM.alt==item){
                //                 let onlinePath = 'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/emoji/'
                //                 let imgstr = "<img style='width:33rpx;height:33rpx;display: inline-block;vertical-align: bottom;' src='"+onlinePath+EM.url+"'>";
                //                 return imgstr;
                //             }
                //         }
                //     }
                // })
                // this.content = '<p>'+ this.content + '</p>';
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    content: this.textMsg,
                    news_id: this.Id,
                    demand_id: this.Id,
                    type: this.type,
                    comment_type: this.commentType,
                    comment_id: this.commentId,
                    user_id: this.comment_userId,
                }

                const  res = await this.$api.releaseNewsComment(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    this.textMsg = "";
                    this.content = "";
                    this.show = false;
                    this.hideDrawer();
                    this.getComments()
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
					if(res.data.data=='no_login'){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
                }
            },
            //获取焦点，如果不是选表情ing,则关闭抽屉
            textareaFocus(){
                if(this.popupLayerClass=='showLayer' && this.hideMore == false){
                    this.hideDrawer();
                }
            },
            textareaBlur(){
              // this.foucsType = false;
              this.hideDrawer();
              this.$parent.inputShow = false;
            },


            // 打开抽屉
            openDrawer(){
                this.popupLayerClass = 'showLayer';
            },
            // 隐藏抽屉
            hideDrawer(){
                this.popupLayerClass = '';
                this.hideMore = true;
                this.hideEmoji = true;
            },
            // 选择表情
            chooseEmoji(){
                this.hideMore = true;
                if(this.hideEmoji){
                    this.hideEmoji = false;
                    this.openDrawer();
                }else{
                    this.hideDrawer();
                }
            },
            //添加表情
            addEmoji(em){
                this.textMsg+=em.alt;
            },

            discard(){
                return;
            }
        },
        watch:{
            inputShow(newValue){
                this.show = newValue;
            },
            show(newValue, oldValue){
                this.$emit('update:inputShow',newValue);
                if (!newValue){
                    this.commentId = '';
                    this.comment_userId = '';
                    this.commentType = '';
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    @import "../../../static/scss/inputstyle";
    .hot-comment{
        background: #FFFFFF;
        margin-bottom: 20rpx;
        .hot-comment-title{
            padding: 20rpx 30rpx;
            border-bottom: 2rpx solid #F1F1F1;
            font-size: 34rpx;
            line-height: 48rpx;
            height: 48rpx;
            font-weight: bold;
        }
        .hot-comment-item{
            padding: 20rpx;
            border-bottom: 2rpx solid #F1F1F1;
            .hot-comment-head{
                @include flex(flex-strat);
                flex-direction: row;
                .img{
                    width: 60rpx;
                    height: 60rpx;
                    margin-right: 10rpx;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 360rpx;
                    }
                    .icon{
                        position: absolute;
                        right: -5rpx;
                        bottom: 0;
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
                text{
                    height: 50rpx;
                    line-height: 50rpx;
                    font-size: 24rpx;
                    font-weight: bold;
                }
                .foot-right{
                    margin-left: auto;
                    @include flex(flex-start);
                    flex-direction: row;
                    .foot-right-item{
                        @include flex(flex-start);
                        flex-direction: row;
                        margin-left: 20rpx;
                        img{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }
                        text{
                            color: #9B9B9B;
                            font-size: 24rpx;
                            line-height: 40rpx;
                            height: 40rpx;
                        }
                    }
                }
            }
            .hot-comment-content{
                padding: 0 0 0 70rpx;
                font-size: 24rpx;
                line-height: 33rpx;
                max-height: 66rpx;
                margin: 20rpx 0;
                @include ellipsis(2);
            }
            .comment-reply{
                padding-left: 70rpx;
                .comment-reply-item{
                    font-size: 24rpx;
                    /*padding: 10rpx 0;*/
                    .reply-head{
                        @include flex(flex-start);
                        flex-direction: row;
                        .img{
                            width: 60rpx;
                            height: 60rpx;
                            margin-right: 10rpx;
                            position: relative;
                            img{
                                width: 100%;
                                height: 100%;
                                border-radius: 360rpx;
                            }
                            .icon{
                                position: absolute;
                                right: 0rpx;
                                width: 30rpx;
                                height: 30rpx;
                                bottom: 0;
                            }
                        }
                        .reply-right{
                            @include flex(flex-start,flex-start);
                            flex-direction: row;
                            .name{
                                line-height: 40rpx;
                                @include flex(flex-start);
                                flex-direction: row;
                                /*color: #007aff;*/
                                .icon{
                                    width: 40rpx;
                                    height: 40rpx;
                                }
                                .title{
                                    /*color: #333333;*/
                                    font-weight: bold;
                                    padding: 0 20rpx;
                                }
                            }
                            .time{
                                color: #9B9B9B;
                                font-size: 20rpx;
                                line-height: 20rpx;
                            }
                        }
                        .foot-right{
                            margin-left: auto;
                            @include flex(flex-start);
                            flex-direction: row;
                            .foot-right-item{
                                @include flex(flex-start);
                                flex-direction: row;
                                margin-left: 20rpx;
                                img{
                                    width: 40rpx;
                                    height: 40rpx;
                                    margin-right: 10rpx;
                                }
                                text{
                                    color: #9B9B9B;
                                    font-size: 24rpx;
                                    line-height: 40rpx;
                                    height: 40rpx;
                                }
                            }
                        }
                    }
                    .reply-content{
                        padding: 20rpx 0rpx 20rpx 70rpx;
                        font-size: 24rpx;
                        line-height: 33rpx;
                        max-height: 66rpx;
                        /*margin: 20rpx 0;*/
                        @include ellipsis(2);
                    }
                }
                .more{
                    @include flex(flex-start);
                    flex-direction: row;
                    color: #A8A8A8;
                    font-size: 24rpx;
                    padding: 0 0 10rpx 70rpx;
                    img{
                        width: 24rpx;
                        height: 24rpx;
                    }
                }
            }
            .hot-comment-foot{
                @include flex(flex-start);
                flex-direction: row;
                padding: 0 10rpx;
                .foot-left{
                    color: #9B9B9B;
                    font-size: 24rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                }
                .foot-right{
                    margin-left: auto;
                    @include flex(flex-start);
                    flex-direction: row;
                    .foot-right-item{
                        @include flex(flex-start);
                        flex-direction: row;
                        margin-left: 20rpx;
                        img{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }
                        text{
                            color: #9B9B9B;
                            font-size: 24rpx;
                            line-height: 40rpx;
                            height: 40rpx;
                        }
                    }
                }
            }
        }
        .hot-comment-more{
            height: 84rpx;
            line-height: 84rpx;
            text-align: center;
            color: #A8A8A8;
            font-size: 28rpx;
        }
    }
</style>
